<!-- pages/index/index.vue -->
<script setup>
import { computed, ref } from 'vue';
import { doctorlistAPI, tablistAPI } from '../../apis/home';
import doctorList from './components/doctor-list.vue';

	// 获取安全区域数据
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	
	const actionID=ref(0)
	  // 标签页数据
	const feedTabs = ref([
	  { label: '推荐', type: 'recommend', current: 1, hasMore: true, list: [], rendered: true },
	  { label: '关注', type: 'like', current: 1, hasMore: true, list: [], rendered: false },
	  { label: '减脂', type: 'fatReduction', current: 1, hasMore: true, list: [], rendered: false },
	  { label: '饮食', type: 'food', current: 1, hasMore: true, list: [], rendered: false },
	])
	// tab获取类型
	const tabType=computed(()=>feedTabs.value[actionID.value].type)
	// 当前页数
	const currents=computed(()=>feedTabs.value[actionID.value].current)
	// 每次请求多少条
	const pagesize=ref(5)
	// 总条数
	const total=ref(0)
	
	// 切换标签
	const onFeedTabChange=(tab)=>{
	      // 把点击的下标赋值
		  actionID.value=tab.index
		  // console.log(tab.index);
		   // 根据tab的rendered属性值决定 如果等于true 说明渲染了一次 就直接在这里取反就不用在渲染了
		   // 这个tab参数是custom-tabs组件传过来的
		  if(!tab.rendered) tablist()
		  //  // 每个标签页只被初始一次  点击tab标签 就把响应的rendered改为true
		  feedTabs.value[actionID.value].rendered=true
	}
	
	// 渲染tab标签下内容的数据
	const tablist=()=>{
		tablistAPI({
			type:tabType.value,
		    current:currents.value,
		    pageSize:pagesize.value,
		}).then((res)=>{
			// console.log(res);
			res.data.rows.forEach((item)=>{
				item.content=item.content.replace(/<[^>]+>/g,'')
			})
			total.value=res.data.total
			feedTabs.value[actionID.value].list=[...feedTabs.value[actionID.value].list,...res.data.rows]
		}).catch((err)=>{
			console.log(err);
		})
	}
	// 上拉加载更多
	const refreshButton=(e)=>{
		if(currents.value*pagesize.value<=total.value){
		  feedTabs.value[actionID.value].current++
		  tablist()
	    }else{
			uni.showToast({
				title:'没有更多数据了',
				icon:'none'
			})
		}
	}
	 const isShow=ref(false);
	 const doctorlists=ref([])
	// 获取医生列表
	function getdoctorlist(){
		doctorlistAPI().then((res)=>{
		    doctorlists.value=res.data.rows
			isShow.value=true
			// console.log(doctorList.value);
		}).catch((e)=>{
			console.log(e);
		})
	}
	
	// 获取医生列表
	getdoctorlist()
    // 获取渲染tab标签下内容的数据
	tablist()
</script>
<template>
	<scroll-page @scrolltolower='refreshButton'>
		<view class="index-page" :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }">
			<!-- 页面导航 -->
			<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">优医</view>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<input placeholder-class="input-placeholder" placeholder="搜一搜: 疾病/症状/医生/健康知识" class="input"
					type="text" />
				<view class="icon-search">
					<uni-icons size="22" color="#C3C3C5" type="search" />
				</view>
			</view>
			<!-- 快速入口 -->
			<view class="quick-entry">
				<navigator hover-class="none" class="quick-entry-item" url="/subpack_consult/quickly/index?type=1">
					<view class="navigator">
						<image class="quick-entry-icon" src="/static/images/yao1.png" />
						<text class="label">问医生</text>
						<text class="small">按科室查问医生</text>
					</view>

				</navigator>
				<!-- type 值为 2 表示极速问诊 -->
				<navigator hover-class="none" class="quick-entry-item" url="/subpack_consult/quickly/index?type=2">
					<view class="navigator">
						<image class="quick-entry-icon" src="/static/images/yao2.png" />
						<text class="label">极速问诊</text>
						<text class="small">20s医生极速回复</text>
					</view>
				</navigator>
				<navigator hover-class="none" class="quick-entry-item" url="/subpack_consult/quickly/index?type=3">
					<view class="navigator">
						<image class="quick-entry-icon" src="/static/images/yao3.png" />
						<text class="label">开药门诊</text>
						<text class="small">线上买药更方便</text>
					</view>
				</navigator>
			</view>
			<!-- 快速查看 -->
			<view class="quick-view">
				<navigator hover-class="none" class="quick-view-item" url="/subpack_medicine/orderList/index">
					<image class="quick-view-icon" src="/static/images/yl1.png" />
					<view class="label">药品订单</view>
				</navigator>
				<navigator hover-class="none" class="quick-view-item" url="/subpkg_archive/list/index">
					<image class="quick-view-icon" src="/static/images/yl2.png" />
					<view class="label">健康档案</view>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image class="quick-view-icon" src="/static/images/yl3.png" />
					<view class="label">我的处方</view>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image class="quick-view-icon" src="/static/images/yl4.png" />
					<view class="label">疾病查询</view>
				</navigator>
			</view>
			<!-- 广告位 -->
			<view class="banner-placeholder">
				<swiper class="uni-swiper" indicator-dots indicator-color="#ffffff99" indicator-active-color="#fff"
					circular>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/2.png" />
						</navigator>
					</swiper-item>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/4.png" mode="widthFix" />
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 标签页列表 -->
			<view class="doctor-feeds" :style="{ marginTop: -safeAreaInsets.top + 'px' }">
				<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
					<custom-tabs @click="onFeedTabChange" :list="feedTabs" />
				</custom-sticky>
				
				<!-- 医生关注列表 -->
				<doctorList  :list="doctorlists" v-if="isShow && tabType=='recommend'"></doctorList>
			
				 <!-- 实现类似keepalive效果 -->
				<view v-for="(item,index) in feedTabs" :key="item.type" v-show="actionID==index">
					<feel-list v-if="item.rendered" :list="item.list" ></feel-list>
				</view>
			</view>
		</view>
	</scroll-page>
</template>
<style lang="scss">
	@import './index.scss';
</style>